import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Button'),
        leading: const Icon(Icons.menu),
        centerTitle: true,
        actions: const [
          Icon(Icons.settings),
        ],
      ),
      body: ButtonDemo(),
    );
  }
}

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Wrap(
        children: [
          TextButton(
              onPressed:(){
                print('点击 TextButton');
              },
              onLongPress: (){
                print('长按 TextButton');
              },
              child: Text('TextButton')
          ),
          ElevatedButton(
              onPressed:(){
                print('点击 ElevatedButton');
              },
              onLongPress: (){
                print('长按 ElevatedButton');
              },
              child: Text('ElevatedButton')
          ),
          OutlinedButton(
              onPressed:(){
                print('点击 OutlinedButton');
              },
              onLongPress: (){
                print('长按 OutlinedButton');
              },
              child: Text('OutlinedButton')
          ),
          OutlinedButton(
              onPressed:(){
                print('点击 OutlinedButton');
              },
              onLongPress: (){
                print('长按 OutlinedButton');
              },
              child: Text('轮廓按钮'),
              style: ButtonStyle(
                textStyle: MaterialStateProperty.all(
                  TextStyle(
                    fontSize: 30,
                  )
                ),
                foregroundColor: MaterialStateProperty.resolveWith((states){
                  if (states.contains(MaterialState.pressed)) {
                    //按下按钮时的前景色
                    return Colors.red;
                  }
                  //默认状态的颜色
                  return Colors.blue;
                }),
                backgroundColor: MaterialStateProperty.resolveWith((states){
                  if (states.contains(MaterialState.pressed)) {
                    //按下按钮时的前景色
                    return Colors.yellow;
                  }
                  //默认状态的颜色
                  return Colors.white;
                }),
                shadowColor: MaterialStateProperty.all(Colors.yellow),
                elevation: MaterialStateProperty.all(20),
                side: MaterialStateProperty.all(
                  BorderSide(
                    color: Colors.green,
                    width: 2,
                  )
                ),
                //声明按钮的形状
                shape: MaterialStateProperty.all(
                  StadiumBorder(
                    side: BorderSide(
                      color: Colors.green,
                      width: 2
                    )
                  )
                ),
                //设置按钮大小
                minimumSize: MaterialStateProperty.all(Size(200,100)),
                //设置水波纹的颜色
                overlayColor: MaterialStateProperty.all(Colors.purple),
              ),
          ),
        ],
      ),
    );
  }
}
